<template>
  <div class="page">
    <headerbar>{{ pageTitle }}</headerbar>
    <section class="bg-white">
      <fetchData  class="bg-white" :loading="isLoading" :data="swipeData"></fetchData>
      <div class="exam-wrap" >
        <myQuestionDetailItem v-for="(data, index) in swipeData"
                              :key="data.id" :oData="data" :index="index"></myQuestionDetailItem>
      </div>
      <p class="pdv-2" style="clear: both"></p>
      <p class="pdv-2"></p>
    </section>

  </div>
</template>

<script>
import api from "@/common/config/api";
import tools from "@/utils/tools";
import _ from "lodash";
import loginService from "@/service/loginService";
import moment from "moment";
import StorageKeys from "@/common/const/StorageKeys";
import myQuestionDetailItem from './myQuestion/myQuestionDetailItem'
let isDebbug = false;
let isSubmiting = false; // 正在提交
export default {
  name: "myQuestionDetail",
  components: {myQuestionDetailItem},
  data() {
    return {
      orderId:'',
      latestLottery: {}, // 每日一答获奖名单
      isLoading: true,
      swipeDataLoading: true,
      hasNoteWeekLoading: true,
      fn: tools,
      key: "",
      pageTitle: "出题记录",
      tabIndex: 0,
      noteWeekData: {},
      hasNoteWeek: false,
      isInputing: false,
      hasAnswer: false,
      alreadAnswer: false,
      fromSuperMarket: false, // 红云超市
      answerScoreData: {}, // 积分兑换数据
      swipeData: [],
      groupTopic: {},
      findGroup: {},
      tipData: {},
      oneRecordTipData: {},
      userDtlInfo: 0.0,
      showButton: false,
      tuihuan: false,
      toast: null,
    };
  },
  created() {
    // this.findGroupTopic(); // 获取今日答题
    // this.findHints(); // 题目提示
    // this.findOneRecordHints(); // 一周一记提示
    // this.userDtlInfos(); //  查询用户答题率信息
    // this.findUserQuestion(); // 查询是否已出题
    this.init()
    //测试代码
    // let data = {"groupTime":"2020-05-23","id":"88DAF4AA8C424E17A3477B730519C5F5","maxExamNum":3,"subResult":"0","subResultId":"","title":"2020-05-23一问一答","topicFlag":"1","topicList":[{"ext":"[{\"title\":\"范围分为非二哥哥如果\",\"right\":\"0\",\"index\":\"1\"},{\"title\":\"抚慰抚慰二个人各\",\"right\":\"0\",\"index\":\"3\"},{\"title\":\"违法让人个人谈话\",\"right\":\"1\",\"index\":\"4\"},{\"title\":\"违法个人个人威风\",\"right\":\"0\",\"index\":\"5\"}]","id":"0754E544AB38402A9630F7CF8914D891","learnTxt":"学习内容学习内容学习内容学习内容学习内容学习内容学习内容学习内容学习内容学习内容学习内容学习内容学习内容1","originFlag":"1","originFlagName":"系统发布","originName":"","originOrgName":"","title":"单选问题测试1","topicType":"1","topicTypeName":"单选"},{"ext":"[{\"title\":\"二个人个人威风威风为发二个人各认购威风威风为发\",\"right\":\"1\",\"index\":\"1\"},{\"title\":\"二个人个人威风威风为发个人个人个人个\",\"right\":\"1\",\"index\":\"2\"},{\"title\":\"威风威风为发二个人各认购威风威风为发\",\"right\":\"1\",\"index\":\"3\"},{\"title\":\"二个人个人威风威风为发人个人个人个\",\"right\":\"1\",\"index\":\"4\"}]","id":"4A02F79A6D964163A90E5864EE3C2D9B","learnTxt":"多选题多选题学习内容多选题多选题学习内容多选题多选题学习内容多选题多选题学习内容","originFlag":"1","originFlagName":"系统发布","originName":"","originOrgName":"","title":"多选题测试","topicType":"2","topicTypeName":"多选"},{"ext":"[{\"title\":\"正确\",\"right\":\"1\",\"index\":\"1\"},{\"title\":\"错误\",\"right\":\"0\",\"index\":\"2\"}]","id":"FBD7AB35F6394FDCB52013CF809F495A","learnTxt":"威风威风为威风威风","originFlag":"1","originFlagName":"系统发布","originName":"","originOrgName":"","title":"判断题测试1","topicType":"3","topicTypeName":"判断"}]}
    // this.swipeData = data.topicList
    // this.swipeData.map((v, index) => {
    //   let rightAnswer = ''
    //   let extArr = JSON.parse(v.ext)
    //   extArr.map((w, index_) => {
    //     switch (index_) {
    //       case 0:
    //         w.title = 'A、' + w.title
    //         if (w.right === '1') {
    //           rightAnswer = rightAnswer + 'A'
    //         }
    //         break
    //       case 1:
    //         w.title = 'B、' + w.title
    //         if (w.right === '1') {
    //           rightAnswer = rightAnswer + 'B'
    //         }
    //         break
    //       case 2:
    //         w.title = 'C、' + w.title
    //         if (w.right === '1') {
    //           rightAnswer = rightAnswer + 'C'
    //         }
    //         break
    //       case 3:
    //         w.title = 'D、' + w.title
    //         if (w.right === '1') {
    //           rightAnswer = rightAnswer + 'D'
    //         }
    //         break
    //       case 4:
    //         w.title = 'E、' + w.title
    //         if (w.right === '1') {
    //           rightAnswer = rightAnswer + 'E'
    //         }
    //         break
    //       case 5:
    //         w.title = 'F、' + w.title
    //         if (w.right === '1') {
    //           rightAnswer = rightAnswer + 'F'
    //         }
    //         break
    //     }
    //   })
    //   v.ext = extArr
    //   v.rightAnswer = rightAnswer
    //   v.fileId = 'd15292b782e24f29bcf7ada54e746652'
    // })
    // this.hasAnswer = true
  },
  methods: {
    /*页面初始化*/
    init() {
      this.hasAnswer = true
      this.loadData()
    },
    loadData() {
      //解决ios报错的问题
      this.$route.query.date = this.$route.query.date.split('-').map(item => {
        if ((item + '').length < 2) return item.padStart(2, '0')
        return item;
      }).join('-');
      this.isLoading = true
      let params = {
        pageNo: 1,
        pageSize: 100,
        createUser: this.tools.getUserInfo().id,
        createDay: moment(`${this.$route.query.date} 00:00:00`).format('YYYY-MM-DD')
      }
      this.fetchService.examQuestionList(params).then(res => {
        if(res.code !==0){
          return tools.tip(res.message || "系统繁忙，请稍候再试！");
        }
        this.swipeData = res.data
        this.isLoading = false
      })
    },
    /*获取填空答案*/
    getAnswerArr(answers, item) {
      let ret = [];
      let temp = [];
      let i = 0;
      let answerLenModel = item.title.match(/(\[@\])+/g);
      answerLenModel = answerLenModel.map((v) => {
        return v.replace(/\[@\]/g, "@");
      });
      for (; i < answers.length; i++) {
        var v = answers[i];
        if (v === undefined || v === "") {
          temp.push(" ");
        } else {
          temp.push(v);
        }
      }
      temp = temp.join("").split("&^");
      temp.forEach((v) => {
        if (v !== "") {
          ret.push(v);
        }
      });
      if (answerLenModel.length !== ret.length) {
        let str = ret[0];
        let lastIndex = 0;
        answerLenModel.map((v, index) => {
          ret[index] = str.substr(lastIndex, v.length);
          lastIndex += v.length;
        });
      }
      ret = ret.map((v, index) => {
        let modelLen = answerLenModel[index].replace(/\[@\]/g, "@").length;
        return v.substr(0, modelLen);
      });
      return ret;
    },
    oneAnswer() {
      this.swipeDataLoading = true;
      let data = {
        loginId: this.tools.getUserInfo().id || "112029",
        groupId: this.groupTopic.id,
        // subResultId: 'C0EE14E568AD47D9B7E275EC30405726'
        subResultId: this.groupTopic.subResultId,
      };
      loginService.findGroup(data).then((res) => {
        this.swipeDataLoading = false;
        if (res.code !== 200) {
          return tools.tip(res.message || "系统繁忙，请稍候再试！");
        }
        console.log("this.findGroup", this.findGroup);
        this.findGroup = res.data;
        // test
        isDebbug && (this.findGroup.subResult = "0");
        this.swipeData = res.data.topicList;
        this.swipeData.map((v, index) => {
          let rightAnswer = "";
          let extArr = JSON.parse(v.ext);
          extArr.map((w, index_) => {
            w._title = w.title;
            switch (index_) {
              case 0:
                w.title = "A、" + w.title;
                if (w.right === "1") {
                  rightAnswer = rightAnswer + "A";
                }
                break;
              case 1:
                w.title = "B、" + w.title;
                if (w.right === "1") {
                  rightAnswer = rightAnswer + "B";
                }
                break;
              case 2:
                w.title = "C、" + w.title;
                if (w.right === "1") {
                  rightAnswer = rightAnswer + "C";
                }
                break;
              case 3:
                w.title = "D、" + w.title;
                if (w.right === "1") {
                  rightAnswer = rightAnswer + "D";
                }
                break;
              case 4:
                w.title = "E、" + w.title;
                if (w.right === "1") {
                  rightAnswer = rightAnswer + "E";
                }
                break;
              case 5:
                w.title = "F、" + w.title;
                if (w.right === "1") {
                  rightAnswer = rightAnswer + "F";
                }
                break;
            }
          });
          v.ext = extArr;
          v.rightAnswer = rightAnswer;
          // 填空题
          if (v.topicType === "4") {
            let _rightAnswers = [];
            extArr.forEach((v) => {
              _rightAnswers.push(v._title);
            });
            v.rightAnswer = _rightAnswers.join("、");
          }
        });
      });
    },
    findGroupTopic() {
      this.tabIndex = 0;
      let data = {
        // groupTime: '2019-12-29' // 测试用
      };
      // loginService.findGroupTopicFlagTest(data).then((res) => {
      loginService.findGroupTopicFlag(data).then((res) => {
        if (res.code !== 200) {
          this.hasAnswer = false;
          this.showToastTxtOnly(res.message || "系统繁忙，请稍候再试！");
          return;
        }
        this.hasAnswer = true;
        this.groupTopic = res.data;
        if (res.data.subResult === "0") {
          this.alreadAnswer = true;
        } else {
          this.alreadAnswer = false;
        }
        // test
        isDebbug && (this.alreadAnswer = true);
        this.oneAnswer();
      });
    },
    showImg(fileId) {
      let fileUrl = this.tools.getImgUrl(fileId);
      console.log("-------------fileUrl=", fileUrl);
      return fileUrl;
    },
    showImagePreview(item) {
      if (item.fileId.length < 1) {
        return false;
      }
      let fileUrl = this.tools.getImgUrl(item.fileId);
      item.url = fileUrl;
      let imgs = [fileUrl];
      this.$createImagePreview(
        {
          initialIndex: 0,
          imgs: imgs,
        },
        (h) => {
          return h(
            "div",
            {
              class: {
                "image-preview-custom-header": false,
              },
              slot: "header",
            },
            ""
          );
        }
      ).show();
    },
    getTime(createTime) {
      return moment(createTime).format("MM月DD日");
    },
    radioSelectItem(rootIndex, id) {
      // if (!this.swipeData[rootIndex].result) {
      //   this.selectNum++
      // }
      this.swipeData[rootIndex].result = id;
      console.log("result=", this.swipeData[rootIndex].result);
    },
    checkboxSelectItem(rootIndex, id) {
      if (this.swipeData[rootIndex].checkboxResult) {
        let index = this.swipeData[rootIndex].checkboxResult.indexOf(id);
        if (index !== -1) {
          this.swipeData[rootIndex].checkboxResult.splice(index, 1);
          // if (this.swipeData[rootIndex].checkboxResult.length === 0) {
          //   this.selectNum--
          // }
        } else {
          this.swipeData[rootIndex].checkboxResult.push(id);
        }
      } else {
        this.swipeData[rootIndex].checkboxResult = [];
        this.swipeData[rootIndex].checkboxResult.push(id);
        // this.selectNum++
      }
      console.log("checkboxResult=", this.swipeData[rootIndex].checkboxResult);
    },
    findHints() {
      this.isLoading = true;
      let data = {
        type: "1",
      };
      loginService.findHints(data).then((res) => {
        this.isLoading = false;
        if (res.code === 200) {
          this.tipData = res.data;
          if (this.$store.state.oneAnswerFrom) {
            if (res.data.bulletBoxHint && res.data.bulletBoxHint !== "") {
              tools.alert(res.data.bulletBoxHint, (...arg) => {});
            }
            this.$store.state.oneAnswerFrom = false;
          }
        }
      });
    },
    findOneRecordHints() {
      let data = {
        type: "3",
      };
      loginService.findHints(data).then((res) => {
        if (res.code === 200) {
          this.oneRecordTipData = res.data;
        }
      });
    },
    findUserQuestion() {
      let data = {};
      loginService.findUserQuestion(data).then((res) => {
        if (res.code !== 200) {
          this.showButton = false;
          //            this.showToastTxtOnly(res.message)
        } else {
          this.showButton = true;
        }
      });
    },
    userDtlInfos() {
      loginService.userDtlInfo().then((res) => {
        if (res.code === 200) {
          this.tuihuan = true;
          this.userDtlInfo = res.data.dtl;
        } else {
          //            this.showToastTxtOnly(res.message)
        }
      });
    },
    showImagePreview(fileId) {
      if (fileId.length < 1) {
        return false;
      }
      let fileUrl = this.tools.getImgUrl(fileId);
      let imgs = [fileUrl];
      this.$createImagePreview(
        {
          initialIndex: 0,
          imgs: imgs,
        },
        (h) => {
          return h(
            "div",
            {
              class: {
                "image-preview-custom-header": false,
              },
              slot: "header",
            },
            ""
          );
        }
      ).show();
    },
    showToastTxtOnly(text) {
      this.toast = this.$createToast({
        txt: text,
        type: "txt",
        time: 3000,
        onTimeout: () => {
          this.toast.hide();
        },
      });
      this.toast.show();
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.list-wenda .item {
  padding-bottom: 20px;
  margin-bottom: 0px;
}
.title-wrap {
  .title {
    font-size: 16PX;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
}
.on-input {
  input {
    border-color: orange;
    background-color: rgba(orange, 0.3);
  }
}
.tab li span {
  font-size: 16PX;
}
.cube-radio-label,
.cube-checkbox-input {
  font-size: 16PX;
}
.input-row-wrap input,
.input-row-wrap textarea {
  font-size: 16PX;
}
.content-img {
  margin-top: 20px;
  width: 100%;
  /*height:calc(85vw * 9 / 16);*/
  overnflow: hidden;
  img {
    width: 100%;
    height: auto;
  }
}
.myProject-img {
  margin-top: 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
  }
}
</style>
